<template>
  <a-modal
    :visible="visible"
    :width="700"
    :bodyStyle="{}"
    :footer="null"
    @ok="ok"
    @cancel="cancel"
  >
    <template slot="title">
      <span class="user-details-modal-title">{{
        editType === "add" ? "新增用户" : "编辑用户"
      }}</span>
    </template>

    <div>
      <a-form
        :form="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        @submit="handleSubmit"
      >
        <a-form-item>
          <template slot="label">
            <span>用户Id</span>
          </template>
          <a-input
            placeholder="请输入用户Id"
            v-decorator="[
              `userId`,
              { rules: [{ required: true, message: '用户Id必须填入!' }] },
            ]"
            :disabled="editType === 'change' ? true : false"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>用户昵称</span>
          </template>
          <a-input
            placeholder="请输入用户昵称"
            v-decorator="[
              `nickName`,
              { rules: [{ required: true, message: '用户昵称必须填入!' }] },
            ]"
          />
        </a-form-item>
        <!-- <a-form-item>
          <template slot="label">
            <span>用户名</span>
          </template>
          <a-input
            placeholder="请输入用户Nbr"
            v-decorator="[
              `userNbr`,
              { rules: [{ required: true, message: '用户userNbr必须填入!' }] },
            ]"
            :disabled=true
          />
        </a-form-item> -->
        <a-form-item>
          <template slot="label">
            <span>真实名称</span>
          </template>
          <a-input
            placeholder="请输入用户真实名称"
            v-decorator="[
              `realName`,
              { rules: [{ required: true, message: '用户真实名称必须填入!' }] },
            ]"
          />
        </a-form-item>
        <!-- <a-form-item>
          <template slot="label">
            <span>密码</span>
          </template>
          <a-input-password
            placeholder="请输入密码"
            v-decorator="[
              `userPass`,
              {
                rules: [
                  {
                    required: editType === 'add' ? true : false,
                    message: '密码必须填入!',
                  },
                  { validator: handlePass },
                ],
              },
            ]"
            :visibilityToggle="false"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>确认密码</span>
          </template>
          <a-input-password
            placeholder="请确认密码"
            v-decorator="[
              `confirmPass`,
              {
                rules: [
                  {
                    required: editType === 'add' ? true : false,
                    message: '密码必须确认!',
                  },
                  { validator: handleConfirmPass },
                ],
              },
            ]"
            :visibilityToggle="false"
          />
        </a-form-item> -->
        <a-form-item>
          <template slot="label">
            <span>年级</span>
          </template>
          <a-input
            placeholder="请输入年级"
            v-decorator="[
              `grade`,
              { rules: [{ required: true, message: '年级必须填入!' }] },
            ]"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>学校</span>
          </template>
          <a-select
            placeholder="请选择学校"
            v-decorator="[
              `schoolId`,
              { rules: [{ required: true, message: '学校必须选择!' }] },
            ]"
          >
            <a-select-option
              v-for="org in orgListData"
              :key="org.schoolId"
              :value="org.schoolId"
              >{{ org.schoolName }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>系别</span>
          </template>
          <a-input
            placeholder="请选择系别"
            v-decorator="[
              `colleges`,
              { rules: [{ required: true, message: '系别必须填写!' }] },
            ]"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>电话</span>
          </template>
          <a-input
            placeholder="请输入电话"
            v-decorator="[`phone`, { rules: [{ required: false }] }]"
          />
        </a-form-item>
        <a-form-item>
          <template slot="label">
            <span>信用分</span>
          </template>
          <a-input
            placeholder="请输入信用分"
            v-decorator="[`creditScore`, { rules: [{ required: false }] }]"
            :disabled=true
            />
        </a-form-item>
        <a-form-item
          :label-col="submitBtnLayout.labelCol"
          :wrapper-col="submitBtnLayout.wrapperCol"
        >
          <div style="text-align: center">
            <a-button
              htmlType="submit"
              type="primary"
              :loading="submitBtnLoading"
              >提交</a-button
            >
          </div>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script>
// import storage from "store";
import { getAllSchool } from "../../../api/school/school";
import { addUser, updataUser } from "../../../api/user/user";

export default {
  name: "UserEditModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    editType: {
      type: String,
      default: "add",
    },
    userDetailsData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      submitBtnLoading: false, // 提交按钮是否加载状态

      password: undefined,
      orgListData: [],
      majorListData: [],

      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      formItemLayout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 19 },
      },
      submitBtnLayout: {
        labelCol: { span: 0 },
        wrapperCol: { span: 24 },
      },
      form: this.$form.createForm(this),
    };
  },
  watch: {
    userDetailsData(val) {
      const _this = this;
      _this.$nextTick(() => {
        _this.form.setFieldsValue({
          userId: val.userId,
          nickName: val.nickName,
          schoolId: val.schoolId,
          schoolName: val.schoolName,
          colleges: val.colleges,
          grade: val.grade,
          realName: val.realName,
          phone: val.phone,
          creditScore: val.creditScore,
          registerId: val.registerId,
          registerStatus: val.registerStatus,
        });
      });
    },
  },
  created() {
    this.getOrg();
  },
  methods: {
    // 自定义密码确认校验
    handlePass(rule, value, callback) {
      this.password = value;
      callback();
    },
    // 自定义密码确认校验
    handleConfirmPass(rule, value, callback) {
      if (this.password && this.password !== value && value !== "") {
        callback(new Error("两次密码输入不一致！"));
      }
      callback();
    },

    // 获取组织
    getOrg() {
      const requestValue = {
        page: 1,
        size: 99999,
      };
      getAllSchool(requestValue).then((res) => {
        const result = res.data.data;
        console.log(res);
        this.orgListData = result.list;
      });
    },
    ok() {
      this.$emit("handleOk");
    },
    cancel() {
      this.$emit("handleCancel");
    },
    handleSubmit(e) {
      e.preventDefault();

      const {
        form: { validateFields },
      } = this;

      const validateFieldsKey = [
        "userId",
        "nickName",
        "schoolId",
        "colleges",
        "grade",
        "realName",
        "phone",
        "creditScore",
        "userPass",
      ];

      validateFields(validateFieldsKey, { force: true }, (err, values) => {
        if (!err) {
          this.submitBtnLoading = true;
          console.log(values);
          if (this.editType === "add") {
            addUser(values)
              .then((res) => {
                console.log(res);
                setTimeout(() => {
                  this.submitBtnLoading = false;
                  this.$emit("handleOk");
                }, 1500);
              })
              .catch((err) => {
                console.log(err);
                this.submitBtnLoading = false;
              });
          } else if (this.editType === "change") {
            values.userId = this.userDetailsData.userId;
            updataUser(values)
              .then((res) => {
                console.log(res);
                setTimeout(() => {
                  this.submitBtnLoading = false;
                  this.$emit("handleOk");
                }, 1500);
              })
              .catch((err) => {
                console.log(err);
                this.submitBtnLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.user-details-modal-title {
  font-size: 20px;
  font-weight: bolder;
  color: #666666;
}
</style>
